<!DOCTYPE>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>游戏分类</title>
<%@ include file="../common/home_head.jsp"%>
</head>
<body style="background:#FFF;">
	<script type="text/javascript">
	$(document).ready(function(){
		$("#nav li").removeClass("active");
		$("#nav>li").eq(1).addClass("active");
	});
	
	
		//根据游戏类型查找游戏
		function getGamesByType(type){
			//隐藏推荐游戏
			$("#grid").hide();
			//删除所创建的多余div
			var g=0;
			while(document.getElementById("game"+g)){
				deleteDiv("game"+g);
				g++;
			}
			//获取分类下的游戏
			$.post(getContextPath()+"/getGameByType",
				{
					tid:type
				},
				function(result){
					//显示分类游戏div
					$("#typeGames").show();
					//获取返回json数据
					var data=result.games;
					var json=JSON.parse(data);
					
					for(var i=0;i<json.length;i++){
						//更改样例div
						var a=json[i];
						$("#name").html(a.palyName);
						$("#img").attr("src",getContextPath()+"/images/games/"+a.palyImg);
						$("#img-href").attr("href",getContextPath()+"/getPalyDetail?gid="+a.palyId);
						$("#h4-href").attr("href",getContextPath()+"/getPalyDetail?gid="+a.palyId);
						$("#developer").html(" "+a.palyDeveloper.devName);
						$("#typename").html(" "+a.palyType.typeName);
						$("#hot").html(" "+a.palyHot);
						$("#introduce").html(a.palyIntroduce);
						$("#more").attr("href",getContextPath()+"/getPalyDetail?gid="+a.palyId);

						//复制样例div追加到后面
						var pDiv=document.createElement('div');
						pDiv.className="blog2-w3ls";
						pDiv.id="game"+i;
						pDiv.innerHTML=document.getElementById('game').innerHTML;
						$("#type").append(pDiv);
					}
					
				},
				"json"
			);
		}
		//删除创建的多余div
		function deleteDiv(id){
		    var my = document.getElementById(id);
		    if (my != null)
		        my.parentNode.removeChild(my);
		 }
		
	
	</script>


	<!-- banner -->
	<div class="sub-banner">
		<%@ include file="../common/navbar.jsp"%>
	</div>
	<!-- banner end -->
	<!-- about-->
	<div class="about-agileinfo" id="about">
		<div class="container">
			<h2>游戏分类</h2>
			<div class="about-grids-w3-agileits">
				<c:if test="${!empty type }">
					<div class="col-md-3 about-grid-left-agileits-w3layouts">
						<ul>
							<c:forEach items="${type }" var="t">
								<li><a class="link link--kumya" href="javascript:void(0);"
									onclick="getGamesByType(${t.typeId})"><span
										data-letters="${t.typeName }"
										style="width: 165px; text-align: center; display: block;">${t.typeName }</span></a></li>
							</c:forEach>
						</ul>
					</div>
				</c:if>

				<!-- 刚进到页面显示的推荐游戏 -->
				<div class="col-md-6 " id="grid" style="position: absolute; left: 50%; top: 30%;width:420px;height:420px;">
					<div class="grid-w3ls">
						<c:if test="${!empty hot }">
							<c:forEach items="${hot }" var="h" begin="0" end="0">
								<figure class="effect-zoe">
									<img
										src="${pageContext.request.contextPath }/images/games/${h.palyImg}"
										alt="${h.palyName}" class="img-responsive" />
									<figcaption>
										<h3>${h.palyName}</h3>
										<p class="icon-links">
											<a
												href="${pageContext.request.contextPath }/getPalyDetail?gid=${h.palyId}"><span
												class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></a>
										</p>
										<p class="description">${h.palyIntroduce}</p>
									</figcaption>
								</figure>
							</c:forEach>
						</c:if>
					</div>
				</div>
				<!-- 推荐end -->
				<!-- 查找分类列表 -->
				<div class="col-md-9 about-grid-right-w3-agile" id="typeGames"
					style="display: none">
					<div class="events-section2-agileinfo">
						<div class="container" id="type" style="width: 100%;">
							<div class="blog2-w3ls" id="game" style="display: none">
								<div class="col-md-4 blog-image-w3l">
									<a id="img-href" href="javascript:void(0);">
										<img id="img" style="max-height: 280px; max-width: 280px; vertical-align: middle;" />
									</a>
								</div>
								<div class="col-md-8 blog-text-w3ls">
									<a id="h4-href" href="javascript:void(0);">
										<h4 id="name"></h4>
									</a>
									<div class="item_info">
										<ul>
											<li>
												<a href="javascript:void(0);">
													<i id="developer" class="glyphicon glyphicon-user"></i>
												</a>
											</li>

											<li>
												<i id="typename" class="glyphicon glyphicon-tags"></i>
											</li>

											<li>
												<i id="hot" class="glyphicon glyphicon-heart"></i>
											</li>

										</ul>
									</div>
									<p id="introduce"></p>
									<a id="more" href="javascript:void(0);" class="blog-read">查看更多</a>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>
				<!-- 分类end -->

				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!-- //about -->




	<%@ include file="../common/footer.jsp"%>
	<%@ include file="../common/loginModal.jsp"%>
</body>
</html>